<template>
	<view class="wc-rotate-count-down">
		<view class="rotate-wrap">
			<view class="rotate">
				<wc-circleprogress></wc-circleprogress>
				<!-- <progress :percent="percent" show-info stroke-width="3" /> -->
			</view>
			<view class="rotate-content">
				<view class="" style="font-size: 24rpx;color:#fff;">{{ remainingTimeText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		name: "RotateCountDown",
		props: {
			// 倒计时总时间，单位秒
			videoDuration: {
				type: Number,
				default: 60,
			},
			videoDownTime: {
				type: Number,
				default: 60,
			},
			isPause: {
				type: Boolean,
				default: false
			},
			isPlay: {
				type: Boolean,
				default: false
			},
			isEnd: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 定时器
				intervalId: null,
				percent: 30
			};
		},
		computed: {
			// 倒计时长。如果时间超过 120s, 就以 03:00 的方式来显示
			remainingTime() {
				return this.videoDownTime > 0 ? this.videoDownTime : '';
			},
			remainingTimeText() {
				if (this.remainingTime > 120) {
					let m = Math.floor(this.remainingTime / 60)
					let s = Math.floor(this.remainingTime % 60)
					if (m < 10) {
						m = `0${m}`
					}
					if (s<10) {
						s = `0${s}`
					}
					return `${m}:${s}`
				}
				return Math.floor(this.remainingTime);
			}
		},
		watch: {
			remainingTime(newVal, oldVal) {
				if (newVal <= 0) {
					this.clearInterval();
					this.$emit('countdown-end');
				}
			},
			isPause(v) {
				if (v) {
					this.clearInterval()
				}
			},
			isPause(v) {
				if (v) {
					this.clearInterval()
				}
			},
			// isPlay(v) {
			// 	if (v) {
			// 		this.startCountdown()
			// 	}
			// }
			
		},
		created() {
			// this.startCountdown();
		},
		methods: {
			// 如果视频播放的时候，没有取消进度条
			startCountdown() {
				// if (this.intervalId) {
				// 	this.clearInterval();
				// }
				// this.intervalId = setInterval(() => {
				// 	this.$emit('update:videoDownTime', this.remainingTime - 1);
				// }, 1000);
			},
			clearInterval() {
				if (this.intervalId) {
					clearInterval(this.intervalId);
					this.intervalId = null;
				}
			},
			remainingTimeFormat () {
				
			}
		},
		beforeDestroy() {
			this.clearInterval();
		},
	}
</script>

<style lang="scss" scoped>
	.wc-rotate-count-down {
		position: relative;

		.rotate-wrap {
			position: absolute;
			top: 80rpx;
			left: 50rpx;
			width: 80rpx;
			height: 80rpx;
			overflow: hidden;
			z-index: 2;


		}

		.rotate {
			width: 100%;
			height: 100%;
			animation: rotoImg 10s linear infinite;
			background-image: url('@/static/img/lottery/lottery_item_bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-right: 2rpx solid #ff8200;
			border-top: 2rpx solid #ff8200;
			border-radius: 50%;
			overflow: hidden;
		}

		.rotate-content {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 3;
			display: flex;
			justify-content: center;
			align-items: center;
			// width: 100rpx;
			// height: 100rpx;
		}
	}

	@keyframes rotoImg {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>